import style from './index.less';
import React, { useState } from 'react';
import { TreeSelect, Tree, Input, Radio } from 'antd';

const treeData = [
  {
    title: '泛普ERP在线试用',
    key: '0-0',
    children: [
      {
        title: '总经办',
        key: '0-0-0',
        children: [
          { title: '综合管理部', key: '0-0-0-0' },
          { title: '投资发展部', key: '0-0-0-1' },
          { title: '人事行政部', key: '0-0-0-2' },
          { title: '财务部', key: '0-0-0-3' },
          { title: '企管部', key: '0-0-0-4' },
          { title: '研发部', key: '0-0-0-5' },
          {
            title: '经营部',
            key: '0-0-0-6',
            children: [
              { title: '市场部', key: '0-0-0-6-0' },
              { title: '销售部', key: '0-0-0-6-1' },
              { title: '渠道部', key: '0-0-0-6-2' },
              { title: '运维部', key: '0-0-0-6-3' },
              { title: '大客户部', key: '0-0-0-6-4' },
            ],
          },
          { title: '商务部', key: '0-0-0-7' },
          { title: '采购部', key: '0-0-0-8' },
          {
            title: '生产部',
            key: '0-0-0-9',
            children: [
              { title: '装配部', key: '0-0-0-9-0' },
              { title: '储运部', key: '0-0-0-9-1' },
              { title: '生产一部', key: '0-0-0-9-2' },
              { title: '生产二部', key: '0-0-0-9-3' },
            ],
          },
          { title: '质量部', key: '0-0-0-10' },
          { title: '工装部', key: '0-0-0-11' },
          { title: '审计部', key: '0-0-0-12' },
          { title: '信息部', key: '0-0-0-13' },
        ],
      },
      {
        title: '账号',
        key: '0-0-1',
      },
    ],
  },
];

const treeDatas = [
  {
    title: '泛普ERP在线试用',
    value: '泛普ERP在线试用',
    children: [
      {
        title: '总经办',
        value: '总经办',
        children: [
          { value: '综合管理部', title: '综合管理部' },
          { value: '投资发展部', title: '投资发展部' },
          { value: '人事行政部', title: '人事行政部' },
          {
            value: '财务部',
            title: '财务部',
            children: [{ value: '报销', title: '报销' }],
          },
          { value: '企管部', title: '企管部' },
          { value: '研发部', title: '研发部' },
          {
            value: '经营部',
            title: '经营部',
            children: [
              { value: '市场部', title: '市场部' },
              { value: '销售部', title: '销售部' },
              { value: '渠道部', title: '渠道部' },
              { value: '运维部', title: '运维部' },
              { value: '大客户部', title: '大客户部' },
            ],
          },
          { value: '商务部', title: '商务部' },
          { value: '采购部', title: '采购部' },
          {
            value: '生产部',
            title: '生产部',
            children: [
              { value: '装配部', title: '装配部' },
              { value: '储运部', title: '储运部' },
              { value: '生产一部', title: '生产一部' },
              { value: '生产二部', title: '生产二部' },
            ],
          },
          { value: '质量部', title: '质量部' },
          { value: '工装部', title: '工装部' },
          { value: '审计部', title: '审计部' },
          { value: '信息部', title: '信息部' },
        ],
      },
      {
        value: '超级账号',
        title: '超级账号',
      },
    ],
  },
];

export default function DeptInfo() {
  // 右边树选择
  const [value, setValue] = useState<string | undefined>(undefined);

  const onChange = (newValue: string) => {
    setValue(newValue);
  };

  return (
    <div className={style.boxs}>
      <header></header>
      <div className={style.containers}>
        <div className={style.left}>
          <Tree
            showLine={true}
            defaultExpandedKeys={['0-0-0', '0-0-0-3', '0-0-0-6', '0-0-0-9']}
            treeData={treeData}
            style={{ marginLeft: '20px' }}
          />
        </div>
        <div className={style.right}>
          <div style={{ marginTop: '15px', marginLeft: '30px' }}>
            上级部门<i>*</i>：
            <TreeSelect
              showSearch
              style={{ width: '25%' }}
              value={value}
              dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}
              placeholder=""
              allowClear
              treeDefaultExpandAll
              onChange={onChange}
              treeData={treeDatas}
            />
          </div>
          <div style={{ marginTop: '15px', marginLeft: '30px' }}>
            部门名称<i>*</i>：
            <Input style={{ width: '25%', border: '1px solid #d4d4d4' }} />
            <br />
          </div>
          <div style={{ marginTop: '15px', marginLeft: '20px' }}>
            是否分公司：
            <Radio.Group name="radiogroup" defaultValue={'是'}>
              <Radio value={'是'} style={{ marginLeft: '10px' }}>
                是
              </Radio>
              <Radio value={'否'} style={{ marginLeft: '50px' }}>
                否
              </Radio>
            </Radio.Group>
          </div>
        </div>
      </div>
    </div>
  );
}
